<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>课程详情</title>
    <link rel="stylesheet" href="../../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}">
    <link rel="stylesheet" href="../../static/css/custom.css" th:href="@{/css/custom.css}">
    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.6.0/skins/default/aliplayer-min.css" />
    <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.6.0/aliplayer-min.js"></script>
</head>
<body>
<!--头部导航-->
<nav class="ui attached segment m-padded-tb-mini">
    <div class="ui container">
        <div class="ui menu secondary font-size-middle font-y-center">

                <span class="ui teal header item">
                <img src="../../static/imges/1.png" th:src="@{/imges/1.png}" class="image-size-mini"/>
                </span>
            <a class="item" th:href="@{/}"><i class="home icon"></i>首页</a>
            <a class="item" th:href="@{/sy/syuser/syclass}"><i class="building icon"></i>sy课堂</a>
            <a class="item" href="aboutwe.html" th:href="@{/sy/syuser/aboutwe}"><i class="info icon"></i>关于我们</a>

            <div class="item right" th:if="${session.User}">
                <div class="ui simple dropdown">
                    <img class="ui avatar image dropdown" src="../static/imges/user.jpg" th:src="${session.User.userImg}">
                    <span th:text="${session.User.userName}"></span>
                    <div class="menu">
                        <a href="User/userPC.html" th:href="@{/sy/syuser/gopc}" class="item"><i class="user circle icon"></i>个人主页</a>
                        <a href="User/userPC.html" th:href="@{/sy/syuser/gopc}" class="item"><i class="edit outline icon"></i>管理中心</a>
                        <a href="/sy/syuser/logout" class="item"><i class="sign out alternate icon"></i>退出登录</a>
                    </div>
                </div>
            </div>
            <!--                注册在这-->
            <div class="item right" th:unless="${session.User}">
                <a onClick="join('注册','/sy/syuser/goregistered','10001','600','350')" href="javascript:;" class="item">注册</a>
                <a href="userlogin.html" th:href="@{/sy/syuser/gologin}" class="item">登录</a>
            </div>

        </div>

    </div>
</nav>
<!--中间内容-->
<div class="ui container m-padded-tb-middle">
    <div class="ui segment">
        <div class="ui grid">
            <!--  左侧视频  -->
            <div class="eight wide column slide">
                <div class="prism-player" id="J_prismPlayer"></div>
            </div>
            <!--   右侧操作栏 -->
            <div class="eight wide column">
                <div class="font-size-big">
                    <span th:text="${session.acourse.courseName}"></span>
                </div>
                <div class="ui segment" th:if="${session.aVideo}">
                    <span>p1:<span th:text="${session.aVideo.videoName}"></span></span><br><br>
                    <span>作者：<span th:text="${session.acourse.courseAuthor}"></span></span>
                    <span th:if="${session.aVideo}" th:text="${session.aVideo.videoUrl}" hidden id="videourl"></span>
                    <span th:if="${session.aVideo}" th:text="${session.aVideo.videoAliUrl}" hidden id="videoAliUrl"></span>
                    <span th:if="${session.aVideo}" th:text="${session.aVideo.videoAuth}" hidden id="videoAuth"></span>
                </div>
                <div class="ui segment" th:unless="${session.aVideo}">
                    暂无学习视频...<br><br>
                    <span>作者：<span th:text="${session.acourse.courseAuthor}"></span></span>
                </div>

                <div class="m-padded-tb-big joinCourse" th:if="${session.coursexk}">
                    <a class="ui olive button big" th:href="@{/sy/course/courseware(courseid=${session.acourse.courseId})}">已参加，继续学习</a>
                </div>
                <div class="m-padded-tb-big joinCourse" th:unless="${session.coursexk}">
                    <button class="ui olive button big" onclick="goclass();" href="javascript:void(0);" type="button">立即参加</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--课程详情部分-->
<div class="ui container m-padded-tb-middle">
    <div class="ui segment m-padded-b-max">
       <h2>课程介绍</h2>
        <div th:if="${session.acourse.courseDetails}">
            <p th:text="${session.acourse.courseDetails}"></p>
        </div>
        <div th:unless="${session.acourse.courseDetails}">暂无课程描述...</div>
    </div>
</div>

<!--footer-->
<footer class="ui vertical segment b-color m-padded-tb-big">
    <div class="ui container">
        <div class="ui grid">
            <div class="eight wide column">
                <a class="item" href="aboutwe.html" th:href="@{/sy/syuser/aboutwe}">关于我们</a><br><br><br>
                <span class="ui teal header" style="display: inline;">
                        <img src="../../static/imges/1.png" th:src="@{/imges/1.png}"/></span>
                <span class="font-tmd">&nbsp;生命可以随心所欲，但不可以随波逐流。</span>
            </div>

            <div class="eight wide column font-tmd">
                计科172 梁瑜<br>
                2020/10/28
            </div>
        </div>
    </div>
</footer>
</body>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../../static/js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script src="../../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../../static/js/sy.min.js" th:src="@{/js/sy.min.js}"></script>
<script type="text/javascript" src="../static/lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //开启小窗口
    function join(title,url,id,w,h){
        layer_show(title,url,w,h);
    }
    const vurl = $("#videourl").text();
    const videoAliUrl = $("#videoAliUrl").text();
    const videoAuth = $("#videoAuth").text();
    var player = new Aliplayer({
        id: "J_prismPlayer",
        autoplay: false,
        width: "100%",
        height:"300px",
        vid:vurl,
        source:videoAliUrl,
        playauth:videoAuth

    });

    //登录验证
    function goclass() {
        if([[${session.User}]]==="" ||[[${session.User}]]==null){
            alert("你还没有登录");
            window.location.replace("/sy/syuser/gologin");
        }else {
            $.ajax({
                type: "get",
                cache: false,
                url: "/sy/xktable/joincourse",
                data: "",
                contenType: "application/json;charset=utf-8",
                success: function (data) {
                    if(data==='ok'){

                        $(".joinCourse").html('<a class="ui olive button big" href="/sy/course/courseware?courseid=[[${session.acourse.courseId}]]">已参加，现在去学习</a><br><p class="m-padded-t-middle font-tmd">你已加入本课程，现在去学习吧！</p>')
                    }
                },
                error: function () {
                    alert("出错了")
                }
            })

        }
    }



</script>
</html>